<template>
	<view>
		<login v-if="is_login" v-on:x="to_login" v-on:plogin="to_login"></login>
		<view class="banner">
			<swiperList swiperWidth="750rpx" swiperHeight="188rpx" position="2"></swiperList>
		</view>
		<view class="content">
			<view class="img-upload">
				<view class="title">{{info.deptName}}-{{info.userName}}邀请您上传笔记~</view>
				<view class="imgs">
					<view class="img" v-for="(item,index) in img_url">
						<image :src="item.split('.')[item.split('.').length-1]=='mp4'?item.replace('.mp4','img.png'):item"></image>
						<view class="x-icon" @click="del(index)">
							<image src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/quxiao-x.png">
							</image>
						</view>
					</view>
					<view v-if="is_upload" class="upload" @click="chooseVideoImage">
						<view class="icon">+</view>
						<view class="msg">拍照上传</view>
					</view>
				</view>
				<view class="time" v-if="info.noteType==2">您有{{allowUploadNum}}次上传机会
				</view>
				<view class="time">
				<view class="time-icon"></view>	剩余上传时间:   <yl-count-down :end-time="info.validEndTime"/>
					<!-- {{info.validStartTime}}{{info.validEndTime}} -->
				</view>
			</view>
			<view class="video_info">
				<view class="title">
					{{info.noteType==1?'直播打卡':'其它打卡'}}
				</view>
				<view class="video_content">
					<view class="icon">
						<image mode="widthFix"
							src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/video.png"></image>
					</view>
					<view class="text">{{info.title}}</view>
				</view>
			</view>
			<button class="add" @click="tijiao">确定提交</button>
		</view>

		<view class="status" v-if="status_show">
			<view class="icon">
				<image src="https://wechat-pictures-1301970825.file.myqcloud.com/yangji/fuli/icon_bijichenggong.png">
				</image>
			</view>
			<view class="msg">笔记上传成功！</view>
			<!-- <view class="button" @click="to('/videoNote/log/log')">查看上传记录</view> -->
			<view class="xian"></view>

			<view class="status-title">
				推荐视频
			</view>
			<!-- 视频推荐 -->
			<scroll-view class="list" :scroll-y="true" v-if="video_list.length>0">
				<view v-if="index<4" v-for="(item,index) in video_list" class="item" @click="to_sindex(item)">
					<view class="video-img">
						<image style="width: 100%;height: 100%;" mode="aspectFill" :src="item.coverUrl"></image>
						<view class="zhezhao"></view>
						<view class="video_pay">
							<uni-icons size="30" color="#fff" type="videocam"></uni-icons>
						</view>
						<view v-if="index<2" class="tuijian">推荐</view>
					</view>
					<view class="video-info-box">
						<view class="video-info-title">{{item.title}}</view>
						<view class="video-info-num">播放量：{{item.playCount}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 已上传打开笔记显示缺省图 -->
		<view class="bk" v-if="allowUploadNum===0">
			<image mode="aspectFill" src="https://wechat-pictures-1301970825.file.myqcloud.com/shop/note/img_wanchengwuxuchongfu.png"></image>
			<view class="message">您已完成上传任务<p></p>无需重复上传</view>
			<view class="button" @click="to('/videoNote/log/log')">查看上传记录</view>
		</view>
		<!-- 打开笔记任务为开始显示缺省图 -->
		<view class="bk" v-if="is_start_time && allowUploadNum!=0">
			<image mode="aspectFill" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/endTime.png"></image>
			<view class="message">打卡笔记任务未开始<p></p>如有疑问请与店长沟通~</view>
			<!-- <view class="button" @click="to('/videoNote/list/list')">查看上传任务</view> -->
		</view>
		<!-- 打开笔记任务已结束显示缺省图 -->
		<view class="bk" v-if="is_end_time && allowUploadNum!=0">
			<image mode="aspectFill" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/endTime.png"></image>
			<view class="message">打卡笔记任务已结束<p></p>如有疑问请与店长沟通~</view>
			<!-- <view class="button" @click="to('/videoNote/list/list')">查看上传任务</view> -->
		</view>
		<!-- 接口出错了显示缺省图 -->
		<view class="bk" v-if="is_err">
			<image mode="aspectFill" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/img_shuaxin.png"></image>
			<view class="message">当前页面未正常打开<p></p>请刷新页面~~</view>
			<view class="button" @click="findUserNote">刷新页面</view>
		</view>
		<!-- 接口返回错误信息显示缺省图 -->
		<view class="bk" v-if="is_err_message">
			<image mode="aspectFill" src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/endTime.png"></image>
			<view class="message">{{err_message}}</view>
			<!-- <view class="button" @click="to('/videoNote/list/list')">查看上传任务</view> -->
		</view>
	</view>

</template>

<script>
	import datediff from "@/components/ywz-DateDiff/ywz-DateDiff.vue"
	import {
		uploadFile2,
	} from "../../common/COSbeijing"
	export default {
		data() {
			return {
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				cameraIndex: 0,
				status_show: false,
				info: {},
				img_url: [],
				is_login: false,
				video_list: [],
				file_type:"",
				allowUploadNum:"",
				is_upload:true,
				is_start_time:false,
				is_end_time:false,
				is_err:false,
				is_err_message:false,
				err_message:""
			}
		},
		onLoad(e) {
			if (!uni.getStorageSync("token")) {
				uni.showToast({
					title: "请授权登录后提交笔记",
					icon: "none"
				})
				this.is_login = true;
			}
			this.info = JSON.parse(e.info);
			console.log(e.info)
			this.findUserNote()
		},
		 components: {datediff},
		onShow() {},

		methods: {
			//返回上一页
			//检测接口
			findUserNote()
			{
				try{
					this.$NoteApi.doRequest('get','note/customer/findUserNote',{noteId:this.info.id}).then(res=>{
						if(res.data.code==0 && res.statusCode==200){
							this.is_err=false
							this.is_err_message=false
							this.allowUploadNum=res.data.data.allowUploadNum
							// let Time=new Date().getTime();
							// //结束时间
							// let endTime=new Date(res.data.data.validEndTime).getTime();
							// //开始时间
							// let startTime=new Date(res.data.data.validStartTime).getTime();
							// //活动未开始
							if(res.data.data.activityStatus==1){this.is_start_time=true;}
							//活动结束
							if(res.data.data.activityStatus==3){this.is_end_time=true;}
						}else{
							if(res.data.message){
								this.is_err_message=true;
								this.err_message=res.data.message
							}else{
								this.is_err=true
							}

						}

					})
				}catch(e){
					//TODO handle the exception
					console.log(e,'抛出异常')
				}

			},
			chooseVideoImage() {
				uni.showActionSheet({
					title: "选择上传类型",
					itemList: ['图片', '视频'],
					success: (res) => {
						if (res.tapIndex == 0) {
							//选择图片

							this.chooseImg();
						} else {
							//选择视频

							this.chooseVideo()
						}
					}
				})
			},
			to(url) {
				uni.navigateTo({
					url: url
				})
			},
			chooseImg() {
				if(this.file_type=='video' && this.img_url.length==0){
					this.img_url=[];
					}
				this.file_type='img'
				if (this.img_url.length >= 3) {
					uni.showToast({
						title: "最多可上传三张",
						icon: "error"
					})
					return false;
				}
				var _this = this;
				uni.chooseImage({
					count: 1,
					 success: async (res) => {
						let filePath = await _this.compressImage(res.tempFiles[0].path)
						// var filePath = res.tempFiles[0].path;
						var filename = filePath.substr(filePath.lastIndexOf('/') + 1);
						uploadFile2(filePath, filename).then(res => {
							_this.img_url.push('https://' + res.Location.replace("noteupload-1301970825.cos.ap-beijing.myqcloud.com",
								"image.renruikeji.cn"))
								if(_this.img_url.length==3){
									_this.is_upload=false
								}
						})
					}
				})
			},
			// 图片压缩
			compressImage(url)
			{
				return new Promise((resolve,reject)=>{
					uni.compressImage({
					  src: url,
					  quality: 50,
					  success: res => {
					    console.log(res,'压缩后的图片')
						resolve(res.tempFilePath)
						// if(res.tempFiles[0].size>=4000000){
						// 	console.log(res.tempFiles[0].size)
						// 	uni.showToast({
						// 		title:"图片不能大于4M",
						// 		icon:"none"
						// 	})
						// 	return
						// }
					  }
					})
				})
			},
			chooseVideo() {
				if(this.file_type=='img'){
					this.img_url=[];
				}
				this.file_type="video"
				// 上传视频
				if (this.img_url.length >= 1) {
					uni.showToast({
						title: "最多可上传一个视频",
						icon: "none"
					})
					return false;
				}
				var _this = this;

				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					camera: this.cameraList[this.cameraIndex].value,
					sourceType: ['album', 'camera'],
					success: (responent) => {
						uni.showLoading({
							title:"上传中请稍等"
						})
						let videoFile = responent.tempFilePath;
						var filename = videoFile.substr(videoFile.lastIndexOf('/') + 1);
						uploadFile2(videoFile, filename,true).then(res => {
							uni.hideLoading()
							_this.img_url.push('https://' + res.Location.replace("noteupload-1301970825.cos.ap-beijing.myqcloud.com",
                  "image.renruikeji.cn"))
								if(_this.img_url.length==1){
									_this.is_upload=false
								}
						})
					}
				})
			},
			del(index) {
				var img = this.img_url;
				delete img[index];
				var arr = [];
				img.map((k, v) => {
					arr.push(k);
				})
				this.img_url = arr;
				this.is_upload=true;
			},
			tijiao() {
				var _this = this;
				var data = {};
				var img = this.img_url;
				if (img.length < 1) {
					uni.showToast({
						title: '请先点击左上角加号将笔记拍照上传后再点击确定提交',
						icon: "none"
					})
					return false;
				}
				data.noteUrl = img.toString();
				data.noteId = this.info.id;
				_this.$NoteApi.doRequest("post", "note/customer/save/v2", data, 'json').then(res => {
					if (res.data.code == 0) {
						uni.setNavigationBarTitle({
							title: '笔记上传成功'
						})
						_this.get_video(res.data.data);
						_this.status_show = true;

					} else if (res.data.code == 401 || res.data.code == 406) {
						uni.showToast({
							title: '请授权登录后提交笔记',
							icon: "none"
						})
						this.is_login = true;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none"
						})
					}
				})
			},
			to_login() {
				this.is_login = false
				this.findUserNote()
			},
			get_video(id) {
				var _this = this;
				var data = {
					noteId: id
				};
				// 测试地址
				// var url = "ruiVideo/index/list"; //首页接口
				var url = "ruiVideo/afterNote/list"; //打卡完成
				_this.$NoteApi.doRequest("get", url, data).then(res => {
					if (res.data.code == 0) {
						_this.video_list = res.data.data
					}
				})
			},
			to_sindex(item)
			{
				var _this=this;
				var data={
					video:item,
					type:201
				}
				uni.setStorageSync("to_index_video",data)
				uni.switchTab({
					url:'/pages/sindex/index'
				})
			}

		}
	}
</script>

<style lang="scss">
	.bk {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 9;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		}
		.bk image{
			width: 410upx;
			height: 410upx;
		}
		.bk .message{
			width: 100%;
			margin-top: 10upx;
			text-align: center;
			font-size: 32upx;
			color: #333;
			font-weight: 400;
			font-family: PingFangSC-Regular, PingFang SC;
			line-height: 51upx;
		}
		.bk .button{
			width: 300upx;
			height: 80upx;
			line-height: 80upx;
			color: #2580F0;
			font-size: 34upx;
			border-radius: 49upx;
			border: 2upx solid #2580F0;
			text-align: center;
			margin-top: 60upx;
		}

	page {
		background-color: #F6F6F6;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 30upx;
	}

	.banner {
		width: 750upx;
		margin-bottom: 30upx;
		background-color: #fff;
	}

	.img-upload {
		width: 100%;
		background-color: #fff;
		border-radius: 8upx;
		box-sizing: border-box;
		padding: 38upx 44upx;
    padding-top: 0;
	}

	.img-upload .title {
    min-height: 108upx;
    line-height: 108upx;
		font-size: 38upx;
		color: #333;
		font-weight: 500;
    box-sizing: border-box;
    border-bottom: 2upx solid #E8E8E8;
	}

	.imgs {
		display: flex;
		flex-wrap: wrap;
		margin-top: 24upx;
	}

	.imgs .upload {
		border: 6upx dashed #979797;
		width: 200upx;
		height: 200upx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 150upx;
		box-sizing: border-box;
		color: #979797;

	}

	.upload .icon {
		line-height: 70upx;
	}

	.imgs .upload .msg {
		font-size: 35upx;
		color: #979797;
		width: 100%;
		text-align: center;
		z-index: 1;
    margin-top: 20upx;
    font-weight: 600;
	}

	.imgs .img {
		width: 200upx;
		height: 200upx;
		margin-right: 36upx;
		border-radius: 8upx;
		position: relative;
		background-color: #DDDDDD;
		margin-bottom: 10rpx;
	}

	.imgs .img image {
		width: 100%;
		height: 100%;
	}

	.x-icon {
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
		position: absolute;
		top: -15upx;
		right: -15upx;
	}

	.video_info {
		width: 100%;
		border-radius: 8upx;
		background-color: #fff;
		margin-top: 50upx;
	}

	.video_info .title {
		font-size: 36upx;
		color: #333;
		font-weight: 500upx;
		height: 98upx;
		border-bottom: 2upx solid #F1F1F1;
		line-height: 98upx;
		box-sizing: border-box;
		padding-left: 28upx;
	}

	.video_content {
		box-sizing: border-box;
		padding: 46upx 62upx;
		font-size: 36upx;
		font-weight: 400;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.video_content .icon {
		width: 96upx;
		height: 96upx;
		margin-right: 38upx;
	}

	.video_content .icon image {
		width: 100%;
		height: 100%;
	}

	.video_content .text {
		flex: 1;
	}

	.add {
		width: 100%;
		height: 104upx;
		font-size: 40upx;
		color: #fff;
		font-weight: 500;
		background-color: #54B174;
		border: none;
		border-radius: 12upx;
		margin-top: 102upx;
	}

	.status {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 100vh;
		left: 0upx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		animation: status-donghua 1s forwards;
		z-index: 10;
	}

	@keyframes status-donghua {
		0% {}

		100% {
			top: 0vh;
		}
	}

	.status .icon {
		width: 242upx;
		height: 188upx;
		margin-top: 40upx;
	}

	.status .icon image {
		width: 100%;
		height: 100%;
	}

	.status .msg {
		font-size: 38upx;
		color: #000000;
		font-weight: 500;
		margin-top: 30upx;
	}

	.status .button {
		font-size: 42upx;
		font-weight: 500;
		color: #333;
		border: 2upx solid #979797;
		border-radius: 12upx;
		width: 400upx;
		height: 104upx;
		line-height: 104upx;
		text-align: center;
		margin-top: 40upx;
	}

	.xian {
		width: 100%;
		height: 24upx;
		background-color: #F1F1F1;
		margin-top: 50upx;
	}

	.list {
		flex: 1;
		width: 100%;
		overflow: auto;
		position: relative;
		box-sizing: border-box;
		padding: 20upx 30upx;
	}

	.status-title {
		width: 690upx;
		height: 74upx;
		background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/yangji/fuli/img_tuijianshiping1.png);
		margin: 20upx auto;
		background-size: 100% 100%;
		font-size: 40upx;
		color: #000;
		font-weight: 600;
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		padding-left: 40upx;
	}

	.item {
		display: flex;
		width: 100%;
		height: 190upx;
		margin-bottom: 40upx;
	}

	.item .video-img {
		width: 190upx;
		height: 190upx;
		border-radius: 12upx;
		position: relative;
	}

	.zhezhao {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.4;
	}

	.tuijian {
		width: 91upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 0upx 0upx 10upx 0upx;
		color: #fff;
		background: linear-gradient(126deg, #FF6A6A 0%, #FF6500 100%);
		position: absolute;
		top: 0;
		left: 0;
		font-size: 28upx;
	}

	.video_pay {
		width: 50%;
		height: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item .video-info-box {
		flex: 1;
		margin-left: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.video-info-title {
		font-size: 36upx;
		color: #000;
		font-weight: 500;
	}

	.video-info-num {
		box-sizing: border-box;
		padding: 2upx 0upx;
		font-size: 26upx;
		color: #666;
		background-color: #F2F2F2;
		width: 202upx;
		text-align: center;
	}

	.to-video-info {
		margin-top: 24upx;
		flex: 1;
		overflow: auto;
	}

	.to-video-info .to-video-title {
		width: 100%;
		text-align: center;
		font-size: 30upx;
		margin-top: 10upx;
		font-weight: 600;
	}

	.to-video-time {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34upx;
		color: #D1D1D1;
		font-weight: 400;
		position: absolute;
		bottom: 30upx;

	}

	.to-video-time image {
		width: 40upx;
		height: 40upx;
		margin-right: 5upx;
	}

	.to-video-img {
		position: relative;
		width: 690upx;
		height: 690upx;
		border-radius: 20upx;
	}

	.to-video-img video {
		width: 100%;
		height: 100%;
		border-radius: 20upx;
	}

	.to-video-img .video_pay {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120upx !important;
		height: 120upx !important;
		z-index: 10;
	}

	.video_pay image {
		width: 100%;
		height: 100%;
	}

	.video-zhezhao {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.3;
		border-radius: 20upx;
	}

	.video-gif {
		width: 310upx;
		height: 310upx;
		position: absolute;
		top: 57%;
		left: 57%;
		transform: translate(-50%, -50%);
		z-index: 11;
	}

	.video-gif image {
		width: 100%;
		height: 100%;
	}

	.donghua {
		width: 0%;
		height: 10upx;
		border-radius: 20upx;
		background-color: red;
		animation: donghua-d 4s forwards;
		position: absolute;
		bottom: 0upx;
		left: 50%;
		transform: translate(-50%, 0%);
	}

	@keyframes donghua-d {
		0% {}

		100% {
			width: 100%;
		}
	}
  .time{
    margin-top: 40upx;
    font-size: 30upx;
    color: #4C4A58;
    display: flex;
    align-items: center;
  }
  .time-icon{
    width: 40upx;
    height: 40upx;
    margin-right: 10upx;
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/note/timeData.png");
    background-size: 100% 100%;
  }
</style>
